"use client";
import { useState } from "react";
import {useRouter} from 'next/navigation'
// import { useHistory } from 'react-router-dom';
function Login() {
  const router = useRouter()
  // const history = useHistory();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  // const handleLogin = () => {
  //   // Perform login logic here, e.g., validate credentials
  //   // For demonstration, assume a successful login
  //   localStorage.setItem('token', 'your_token_here');
  //   history.push('/caidan');
  // };
const onLogin = () => {
  router.push('/home')
}
  return (
    <div
      className="login"
      style={{
        width: "100vw",
        height: "100vh",
        position: "relative",
        // background: "red",
      }}
    >
      <div  style={{
        width: "100vw",
        height: "450px",
        backgroundImage: "url(/0.jpg)",
      }}>
        <div
          className="login_box"
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "space-around",
            borderWidth: "0px",
            position: "absolute",
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
            width: "500px",
            height: "580px",
            fontFamily: "微软雅黑 Bold, 微软雅黑, sans-serif",
            fontWeight: 700,
            fontStyle: "normal",
            fontSize: "16px",
            color: "#999999",
            textAlign: "left",
            lineHeight: "20px",
            backgroundColor: "#fff",
          }}
        >
          <div
            className="top"
            style={{
              marginTop: "70px",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            <img
              src="/login/da.png"
              alt=""
              style={{ width: "176px", height: "93px" }}
            />
            <p
              style={{ marginTop: "20px", color: "#0079fe", fontSize: "36px" }}
            >
              <span
                style={{
                  fontFamily: "微软雅黑 Bold, 微软雅黑, sans-serif",
                  fontWeight: 700,
                }}
              >
                客户关系管理系统
              </span>
            </p>
            <p style={{ fontSize: "18px" }}>
              <span
                style={{
                  fontFamily: "微软雅黑, sans-serif",
                  fontWeight: 400,
                  fontSize: "16px",
                }}
              >
                Customer Relationship Management
              </span>
            </p>
          </div>
          <div className="bom" style={{ flex: 1 }}>
            <div
              className="bom_style bom_username"
              style={{
                width: "380px",
                height: "50px",
                border: "1px solid #ccc",
                borderRadius: "5px",
                marginTop: "30px",
                display: "flex",
                alignItems: "center",
              }}
            >
              <img src="/login/6.png" alt="" />
              <input
                type="text"
                className="username"
                placeholder="请输入用户名称"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                style={{
                  width: "300px",
                  border: "none",
                  marginLeft: "10px",
                  outline: "none",
                }}
              />
            </div>
            <div
              className="bom_style bom_password"
              style={{
                width: "380px",
                height: "50px",
                border: "1px solid #ccc",
                borderRadius: "5px",
                marginTop: "30px",
                display: "flex",
                alignItems: "center",
              }}
            >
              <img src="/login/8.png" alt="" />
              <input
                type="password"
                className="password"
                placeholder="请输入登录密码"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                style={{
                  width: "300px",
                  border: "none",
                  marginLeft: "10px",
                  outline: "none",
                }}
              />
            </div>
            <div
              className="bom_submit"
              style={{
                width: "380px",
                height: "50px",
                borderRadius: "5px",
                marginTop: "30px",
                backgroundColor: "#0079fe",
                textAlign: "center",
                lineHeight: "50px",
              }}
              onClick={()=>onLogin()}
            >
              <span style={{ color: "white", fontSize: "18px" }}>登录</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;
